<template>
  <div>
    <!-- 内容展示区域 -->
    <div class="back" @click="show(1)">&lt;&lt;基本信息</div>
    <ul class="card-ul">
      <li v-for="(item,index) in noteListCopy" :key="index" @click="goNote(item.noteId)">
        <img :src="'api/upload/'+item.noteImg1" alt="图片加载失败" class="card-img" />
        <div class="card-footer">
          <div class="card-footer-menuname">{{item.noteTitle}}</div>
          <div>{{item.noteTime|timerFilter('-')}}</div>
        </div>
      </li>
    </ul>

    <!-- 分页 -->
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="totalNum"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/style/global.css";
import "@/styles/myElPagination.scss";

export default {
  mounted() {
    this.loadData();
  },
  data() {
    return {
      noteList: [],
      noteListCopy: []
    };
  },
  props: ["uid"],
  methods: {
    show(index) {
      this.$parent.toggle(index);
    },
    loadData() {
      this.$axios
        .get("/api/users/getMyNotes", {
          params: { userId: this.uid }
        })
        .then(res => {
          console.log("他人笔记获取成功", this.noteList);
          this.noteList = res.data.results;
          this.noteListCopy =
            this.noteList.length > 8
              ? this.noteList.slice(0, 8)
              : this.noteList;
          this.totalNum = this.noteList.length;
        })
        .catch(err => {
          console.log("他人笔记获取失败", err);
        });
    },
    goNote(id) {
      this.$router.push({ path: `/community/notelist/note/${id}` });
    },
    handleCurrentChange(currentPage) {
      this.noteListCopy = this.noteList.slice(
        (currentPage - 1) * 8,
        this.totalNum - 8 * (currentPage - 1) >= 8
          ? currentPage * 8
          : this.totalNum
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.back {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #e6a23c;
  margin-bottom: 15px;
}
.back:hover {
  color: #e6a23c;
  opacity: 0.8;
}
.card-ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 200px;
    background-color: #fff;
    margin-right: 20px;
    border-radius: 10px;
    transition: transform 0.8s ease-out;
    margin-bottom: 20px;
    .card-img {
      width: 100%;
      height: 200px;
      background-image: url("../../../assets/s03.png");
      border-radius: 10px;
    }
    .card-footer {
      width: 100%;
      border-radius: 10px;
      line-height: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  li:nth-child(4n) {
    margin-right: 0;
  }
  li:hover {
    box-shadow: 0 0 10px #000;
    transform: scale(1.03, 1.03);
    font-weight: 700;
  }
}
</style>